<!-- siblings -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./jquery.min.js"></script>
  </head>
  <body>
    <!-- 爸爸 -->
    <div class="container">
      <!-- 大哥 -->
      <div>1</div>
      <!-- 二哥 -->
      <p id="ppp">2</p>
      <!-- 三弟 -->
      <span>3</span>
      <!-- 四妹 -->
      <p>4</p>
      <!-- 五第 -->
      <p>5</p>
    </div>

    <script>
      // siblings 方法的使用
      $(function () {
        const erGe = $('#ppp') // 获取到二哥

        // 想要获取二哥的其他兄弟，咋办？
        const daGeHeSanDi = erGe.siblings() // 返回其他兄弟，不包括自己

        daGeHeSanDi.css({ 'background-color': 'pink' })

        // 想要获取其他的 p 标签兄弟
        const pXiongDiMen = erGe.siblings('p') // 只会找出所有的p兄弟元素
        pXiongDiMen.css({ color: 'blue' }) // 如果 red 不写单引号，那么对于JS语法而言，就表示引用变量
      })
    </script>
  </body>
</html>
